<template>
<!--group_list.wxml-->
<view class="container">
    <view class="nav">
        <navigator :class="'nav-item ' + (tabType==0?'choose':' ')" @tap="changeTab" data-type="0">限时折扣<text></text></navigator>
        <navigator :class="'nav-item ' + (tabType==1?'choose':' ')" @tap="changeTab" data-type="1">限时优惠<text></text></navigator>
        <navigator :class="'nav-item ' + (tabType==2?'choose':' ')" @tap="changeTab" data-type="2">限时促销<text></text></navigator>
        <navigator :class="'nav-item ' + (tabType==3?'choose':' ')" @tap="changeTab" data-type="3">买就送<text></text></navigator>
    </view>
    <!-- <navigator class="group-purchase" hidden='{{!requestData.ad}}'>
        <image class="wh100" src="{{url}}{{requestData.ad.ad_code}}"/>
    </navigator> -->
    
         <view v-for="(item, index) in requestData" :key="index" class="content">
              <navigator :url="'/pages/activity/sales_goods/sales_goods?id=' + item.id">   
                    <image mode="aspectFill" :src="url + '' + item.prom_img"></image>
                    <view class="bottom">
                        <view class="title"><text></text>{{item.title}}</view>
                        <view class="time">时间：{{item.starttime}} 至 {{item.endtime}}</view>
                    </view>
              </navigator>
         </view>
 
   
    
    <!-- <view class="choice_box">
        <view wx:for="{{requestData.groups}}" wx:for-item="g">
            <navigator wx:for="{{g.prom_goods_item}}"  class="choice_item" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}&item_id={{item.item_id}}" wx:key="{{index}}">
              <view class="img-wrap">
                  <image src="{{url}}/api/goods/goodsThumImages?goods_id={{item.goods_id}}&width=400&height=400"></image>
                  <view class="discount">{{g.prom_detail}}</view>
              </view>
              <view class="title">{{item.goods_name}}</view>
              <view class="price">￥{{item.price}}</view>
              <view class="count-down">
                  <view class="tip-count">剩余</view>
                  <view class="tip-count">{{ g.remainTime }}</view>
              </view>
          </navigator>
        </view>
        
    </view> -->
    <view class="no-data" v-if="!requestData || requestData.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有找到相关的记录</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      tabType: 0,
      goodsCurrentPage: 1,
      timer: null
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    // load.init(this, 'groups', 'requestData');
    load.init(this, '', 'requestData');
    this.requestGroupBuy(this.tabType);
    this.createTimer();
  },
  onUnload: function () {
    clearInterval(this.timer);
  },
  //下拉分页
  onReachBottom: function (e) {
    console.log(123);
    this.requestGroupBuy(this.tabType); // Do something when page reach bottom.
  },
  methods: {
    //导航切换
    changeTab: function (event) {
      var that = this;
      console.log(555666);
      console.log(event);
      var tabType = event.currentTarget.dataset.type; //重置数据

      load.resetConfig();
      this.setData({
        tabType: tabType
      });
      this.requestData = null;
      this.goodsCurrentPage = 1;
      this.requestGroupBuy(tabType);
    },
    requestGroupBuy: function (tabType) {
      var that = this; //   var requestUrl = that.data.url + '/api/activity/SalesList';

      var requestUrl = that.url + '/api/activity/promote_goods';
      requestUrl += '/type/' + tabType;
      requestUrl = requestUrl + '?p=' + that.goodsCurrentPage; //时间格式转换

      load.request(requestUrl, function (res) {
        //   that.data.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.starttime = util.formatTime(val.start_time, false);
          val.endtime = util.formatTime(val.end_time, false);
        }); //   wx.stopPullDownRefresh();
      }); //时间格式转换

      var goodsCurrentPage = that.goodsCurrentPage++;
      load.request(requestUrl, function () {
        that.setData({
          goodsCurrentPage: goodsCurrentPage
        });
      });
    },
    //   onReachBottom: function () {
    //     if (load.canloadMore()) {
    //       this.requestGroupBuy(this.data.tabType);
    //     }
    //   },
    createTimer: function () {
      var that = this;
      var startTime = new Date().getTime();
      this.timer = setInterval(function () {
        if (!that.requestData || !that.requestData.groups) {
          return;
        }

        var remainTime = 0;
        var groups = that.requestData.groups;

        for (var i = 0; i < groups.length; i++) {
          var diffTime = startTime - that.requestData.server_current_time * 1000;
          groups[i].remainTime = util.remainTime(groups[i].end_time * 1000 - new Date().getTime() + diffTime);
        }

        that.setData({
          'requestData.groups': groups
        });
      }, 1000);
    }
  }
};
</script>
<style>
.container {
    color: #666;
}
/* .nav{
  position: fixed;
  top: 0;
  left: 0;
} */
.nav-item{
    float: left;
    width: 25%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color:#333;
}
.nav-item .ico-dg{
    width: 32rpx;
    height: 18rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.group-purchase{
    width: 100%;
    height: 375rpx;
}
.choice_box{
    background-color: #f0f2f5;
}
.choice_box .choice_item{
    position: relative;
    float: left;
    width: 370rpx;
    margin: 2rpx;
    font-size: 28rpx;
    background-color: #fff;
    box-sizing: border-box;
}
.choice_item .img-wrap{
    position: relative;
    width:370rpx;
    height:370rpx;
    overflow: hidden;
}
.choice_item .img-wrap image{
    width: 100%;
    height: 100%;
}
 .discount{
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    padding: 0px 5rpx;
    background-color: #ff6a00;
}
.choice_item .title{
    margin:16rpx 0 26rpx 0;
    padding: 0 10rpx;
    height: 36rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;
    word-break: break-all;
}
.involved{
    font-size: 22rpx;
    padding:10rpx;
    color: #666;
}
.choice_item .price{
    height: 30rpx;
    line-height: 30rpx;
    padding-bottom:20rpx;
    padding-left:10rpx;
    color: #ff6a00;
    font-size: 24rpx;
}
.count-down{
    position: absolute;
    right: 0;
    bottom: 20rpx;
    font-size: 22rpx;
    color: #666;
}

/* 优化促销活动页 */
.page{
    background:#F2F2F2 !important;
    padding-top: 20rpx;
}
.container .nav{
    background: #fff;
}
.nav-item.choose{
    color: #ff6a00;
    position: relative;
}
.nav-item.choose text{
    width: 40rpx;
	height: 5rpx;
	background-color: #ff6a00;
	border-radius: 3rpx;
    position: absolute;
    left:37%;
    bottom:6rpx;
}
.content{
    width:690rpx;
    height:400rpx;
    background-color:#ffffff;
    border-radius:12rpx;
    margin-top:20rpx;
    padding:10rpx;
    margin-left:20rpx;
}
.content image{
    width: 680rpx;
	height: 280rpx;
	background-color: #f1f1f1;
	border-radius: 12rpx;
    display:block;
    margin: 0 auto;
}
.content .bottom{
	font-size: 32rpx;
	color: #202020;
    padding-left:10rpx;
    margin-top:20rpx;
}
.content .bottom .title{
    position: relative;
    padding-left: 26rpx;
}
.content .bottom .title text{
    content: "";
    display: inline-block;
    width: 6rpx;
    height: 30rpx;
    background-color: #ff6a00;
	border-radius: 3px;
    position: absolute;
    left: 0;
    top:6rpx;
}
.content .bottom .time{
	font-size: 24rpx;
	color: #666666;
    margin-top:14rpx;
    padding-left:26rpx;
}
</style>